<template>
  <view class="container">
    <!-- 搜索 -->
    <LocationCalendar ref="searRef" page="search" @search="search"/>
    <!-- 内容区域 -->
    <view class="content">
      <view class="main">
				<view class="search-before" v-if="!isSearch">
					<!-- 历史搜索 -->
					<view class="history" v-if="his.length">
						<view class="h-tit"> 历史搜索 </view>
						<view class="h-list">
							<view class="h-item" v-for="(item, index) in his" :key="item">
								<view class="h-left" @tap="search(item.search)">
									<image src="/static/icon/home/history.png" class="h-img"></image>
									<view class="h-name"> {{item.search}} </view>
								</view>
								<uni-icons type="closeempty" size="16" @tap="delHis({ids: item.id, index})" />
							</view>
						</view>
					</view>
					<!-- 热门推荐 -->
					<view class="recomm" v-if="hot.length">
						<view class="r-tit"> 热门推荐 </view>
						<view class="r-list">
							<view class="r-item" v-for="item in hot" :key="item" @tap="search(item.search)"> {{item.search}} </view>
						</view>
					</view>
				</view>
        <!-- 搜索到的内容 -->
        <view class="search-content" v-else>
					<SwitchTab :arr="categoryArr" :top="0" bgc="#fff" @tapSwitch="tapSwitch" />
          <view class="goods-list" v-if="goodsList.length>0">
            <ProductItem :item="item" v-for="item in goodsList" :key="item"/>
          </view>
          <Empty v-else/>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
  import Empty from '@/components/Empty.vue';
  import SwitchTab from '@/components/SwitchTab.vue';
  import ProductItem from '@/components/ProductItem.vue'
  import LocationCalendar from '@/components/LocationCalendar.vue';
	import { GetSearchLogApi, DelApi, GetHomeGoodsListApi } from '@/service/index.js'
	import { categoryArr } from '@/utils/switchBar.js'
	import { useUserStore, useAddressStore } from '@/store/index.js'
  const searRef = ref()
	const his = ref([]) // 搜索历史
	const hot = ref([]) // 热门推荐
	const page = ref(1)
	const total = ref()
	const pageSize = ref(15)
	const goodsList = ref([]) // 商品列表
	const categoryId = ref('1')
	const isSearch = ref(false) // 是否搜索了
	const searchVal = ref('')
	// 切换分类
	const tapSwitch = (id) => {
		page.value = 1
		goodsList.value = []
	  categoryId.value = id
		getGoodsList()
	}
	// 按钮搜索
	const search = (val) => {
		searchVal.value = val
    searRef.value.searchValue = val
		page.value = 1
		goodsList.value = []
		getGoodsList()
  }
	// 获取商品列表
	const getGoodsList = () => {
		const { lonlat } = useAddressStore()
		isSearch.value = true
		let params = {
			page: page.value, //分页页码，数字类型
			page_size: pageSize.value,
			search: searchVal.value, //搜索条件
			latitude: lonlat.latitude, //纬度
			longitude: lonlat.longitude, //经度
			order: categoryId.value //排序方式
		}
		GetHomeGoodsListApi(params).then(res => {
			total.value = res.total
			goodsList.value.push(...res.data)
		})
	}
	// 删除搜索记录
	const delHis = (obj) => {
		const { ids, index} = obj
		DelApi({ids}).then(res => {
			console.log(res, 'del');
			his.value.splice(index, 1)
		})
	}
	// 获取搜索历史
	const getSerchHistory = () => {
		GetSearchLogApi().then(res => {
			his.value = res.data
			hot.value = res.hot
		})
	}
	onLoad(() => {
		const { token } = useUserStore()
		if(token) {
			getSerchHistory()
		}
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		getGoodsList()
	})
</script>

<style lang="scss" scoped>
  .container {
    // 内容区域
    .content {
			background: linear-gradient( 180deg, #FFFFFF 0%, #F6F6F6 100%);
      padding: 10px 12px;
      .main {
				.search-content {
					.goods-list {
						padding: 10px 0;
						column-count: 2; /* 设置列数 */
						column-gap: 9px; /* 列之间的间距 */
						box-sizing: border-box; /* 确保内边距不会增加容器大小 */
					}
				}
        // 历史搜索
        .history {
          padding: 0 4px;
          box-sizing: border-box;
          .h-tit {
            height: 19px;
            font-weight: bold;
            font-size: 16px;
            color: #333333;
            line-height: 19px;
          }
          .h-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .h-item {
              width: 48%;
              height: 50px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              border-bottom: 1px solid #E6E6E6;
              .h-left {
                flex: 1;
                display: flex;
                align-items: center;
                .h-img {
                  width: 16px;
                  height: 16px;
                  margin-right: 8px;
                }
                .h-name {
                  height: 16px;
                  font-weight: 400;
                  font-size: 14px;
                  color: #666666;
                  line-height: 16px;
                }
              }
            }
            
          }
        }
        // 热门推荐
        .recomm {
          margin-top: 21px;
          padding: 0 4px;
          box-sizing: border-box;
          .r-tit {
            height: 19px;
            font-weight: bold;
            font-size: 16px;
            color: #333333;
            line-height: 19px;
          }
          .r-list {
            margin-top: 19px;
            .r-item {
              display: inline-block;
              height: 28px;
              font-size: 14px;
              color: #666666;
              padding: 0 6px;
              margin-right: 10px;
              margin-bottom: 8px;
              line-height: 28px;
              background: #F0F0F0;
              box-sizing: border-box;
              border-radius: 4px 4px 4px 4px;
            }
          }
        }
      }
    }
  }
</style>